<template>
  <t-space>
    <t-button
      v-for="item in BUTTON_LIST_DATA"
      :key="item.text"
      @click="handlePrintData(item.text)"
      :theme="item.theme"
    >
      {{ item.text }}
    </t-button>
  </t-space>
  <div id="msg">我是codesigner，是一个合格的屎山堆积者</div>
</template>
<script setup lang="ts">
import PrintJS from "print-js";
import "print-js/dist/print.css";

// 按钮列表
const BUTTON_LIST_DATA = [
  { text: "pdf", theme: "primary" },
  { text: "image", theme: "success" },
  { text: "html", theme: "danger" },
  { text: "json", theme: "warning" },
];

// BUTTON_LIST_DATA的text的类型
type ButtonListDataText = (typeof BUTTON_LIST_DATA)[number]["text"];

const JSON_DATA=[
    {
        name:"codesigner",
        age:24,
        sex:"男"
    },
    {
        name:"zhangsan",
        age:30,
        sex:"男"
    },
    {
        name:"wanghong",
        age:18,
        sex:"女"
    }
]

// 打印
const handlePrintData = async (type: ButtonListDataText) => {
  switch (type) {
    case "pdf":
      // 处理pdf打印
      //   // 最简单的打印pdf的方式
      //   PrintJS("https://rocket-chat.oss-cn-hangzhou.aliyuncs.com/202404/1677/e9672b21c0224e34a6247de40c132384.pdf")
      // 文件较大加上loading
      PrintJS({
        printable:
          "https://rocket-chat.oss-cn-hangzhou.aliyuncs.com/202404/1677/e9672b21c0224e34a6247de40c132384.pdf",
        type: "pdf",
        showModal: true,
        modalMessage: "正在生成pdf文件，请稍等...",
      });
      // base64
      // 将pdf文件转为base64
      //   PrintJS({
      //     printable: pdfBase64,
      //     type: "pdf",
      //     showModal: true,
      //     modalMessage: "正在生成pdf文件，请稍等...",
      //     base64: true,
      //   });
      break;
    case "image":
      PrintJS({
        printable: [
          "https://rocket-chat.oss-cn-hangzhou.aliyuncs.com/202303/999999/imagesb7ab2054257e49c495e2540cd6434705.png",
          "https://rocket-chat.oss-cn-hangzhou.aliyuncs.com/202303/999999/imagesb7ab2054257e49c495e2540cd6434705.png",
        ],
        type: "image",
        showModal: true,
        modalMessage: "正在生成图片，请稍等...",
      });
      // 处理image打印
      break;
    case "html":
      PrintJS({
        printable: "msg",
        type: "html",
        showModal: true,
        modalMessage: "正在生成HTML，请稍等...",
        header:"打印Html"
      });
      // 处理html打印
      break;
    case "json":
      // 处理json打印
      PrintJS({
        printable: JSON_DATA,
        type: "json",
        showModal: true,
        properties: ["name","age",'sex'],
        modalMessage: "正在生成json，请稍等...",
        header:"打印Json"
      });
      break;
    default:
      console.log("未知操作");
  }
};
</script>
